import React, { Component, Fragment } from 'react'
import Mark from './Mark'

export default class Dialog extends Component {
    state = {
        flag: false,
        list: []
    }
    setFlag = () => {
        this.setState({
            flag: true
        })
    }
    acceptFlag = (flag, list) => {
        this.setState({
            flag,
            list
        })
    }
    render() {
        const { flag, list } = this.state
        return (
            <Fragment>
                <div>
                    我喜欢的爱好是:
                    {
                        // 数组
                        list? list.map((item, index) => {
                            return item.flag? <span key={index}>{item.title}--</span>: null
                        }): null
                    }
                </div>
                <button onClick={() => {
                    this.setFlag()
                }}>点我出现弹框</button>
                {
                    flag ? <Mark acceptFlag={this.acceptFlag} /> : <></>
                }
            </Fragment>
        )
    }
}
